<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/includes.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" itemscope itemtype="http://schema.org/Article">
<head>
	<title>zzzzzz</title>
	<%@ include file="/WEB-INF/common/meta.jsp" %>
	<meta itemprop="name" content="${topicBo.title}"/>
	<meta itemprop="description" content="${topicBo.content}"/>
	<link type="text/css" rel="stylesheet" href="${ctx}/res/css/main.css" />
	<script type="text/javascript" src="${ctx}/res/js/jquery/jquery-1.6.1.min.js"></script>
	<script type="text/javascript">
		var jq = jQuery.noConflict();
	</script>
	<script type="text/javascript" src="${ctx}/res/js/main.js"></script>
	<script type="text/javascript" src="${ctx}/res/js/simple_comment_with_reply.js"></script>
</head>
<body>

<%@ include file="/WEB-INF/common/header.jsp" %>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

<div id="topic-detail" class="site-wrap wrap">
	<c:choose>
		<c:when test="${topicBo == null}">
			<zzzzzz-ui:message key="msg_error_topic_not_found" type="error"/>
		</c:when>
		<c:otherwise>
			<%
			long topicId = (Long) request.getAttribute("topicId");
			%>
			<div class="content-wrap">
				<div class="basic-box">
					<div class="topic-content" style="padding-right: 18px; position: relative;">
						<h1>${topicBo.title}</h1>
						<div>${topicBo.content}</div>
						<div style="position: absolute; right: 0; top: 0;">
							<a href="#dropdown_link"><span class="arrow arrow-down"></span></a>
							<ul data-dom-id="dropdown-menu" class="vertical dropdown-index index" >
								<c:if test="${topicBo.userId == currentUser.userId}">
									<li><a href="${ctx}/topic/edit/${topicBo.topicId}">Edit</a></li>
								</c:if>
							</ul>
						</div>
					</div>
					<div style="text-align: right; font-size: 11px;">
						<a href="${ctx}/profile?id=${topicBo.userId}" style="font-weight: bold; margin-right: 2px;">${topicBo.createBy}</a> ${topicBo.createDate}
					</div>
					<div class="line-top">
						<!-- Place this tag where you want the +1 button to render -->
						<!-- <g:plusone size="medium" annotation="inline" width="330"></g:plusone> -->
						<g:plusone size="medium"></g:plusone>
					</div>
				</div>
				
				<div class="basic-box">
					<div class="comment-wrap">
						<c:if test="${currentUser != null}">
							<div data-comment-dom-id="post-form-container" class="comment-entry level1">
								<div class="comment-entry-inner">
									<img src="${ctx}/res/images/fb_avatar.png" data-comment-dom-id="avatar" class="avatar" style="display: none;"/>
									<div data-comment-dom-id="post-textarea-container">
										<div class="comment-textarea-outer">
											<form data-comment-dom-id="post-form" method="get" action="${ctx}/user/add_comment">
												<textarea data-comment-dom-id="post-textarea" placeholder="Add a comment..." style="height: 14px;"></textarea>
											</form>
										</div>
										<div data-comment-dom-id="post-tip" class="tip" style="display: none;">Press Enter to post your comment.</div>
									</div>
								</div>
							</div>
						</c:if>
						<ul data-comment-dom-id="entry-container" class="comment-entry-container">
							<li data-comment-dom-id="showing-status" class="comment-entry level1"  style="display: none"></li>
							
							
							<li data-comment-dom-id="view-more" class="comment-entry level1" style="display: none; text-align: center;">
								<a href="#">View more (<span data-comment-dom-id="unshown-status"></span>)</a>
							</li>
							<li data-comment-dom-id="no-more-result" class="comment-entry level1" style="display: none; text-align: center;">
								<span>No more comment.</span>
							</li>
							<li data-comment-dom-id="loading-status" style="display: none; padding: 5px 0 0 0; text-align: center"><img src="${ctx}/res/images/common/fb_loading.gif"/></li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="sidebar">
				<div class="pane">
					<ul class="horizontal reply-follow-index index">
						<li>
							<a href="#post_link" style="" class="style2-button large-button button">Post a comment</a>
						</li>
						<li>
							<a href="#" class="style3-button large-button button">Follow this post</a>
						</li>
					</ul>
				</div>
			</div>
			
			<script type="text/javascript">

			var simpleReplyComment = new SimpleReplyComment({
				'j_comment_entry_container' : jq("[data-comment-dom-id=entry-container]"),
				'j_comment_post_form' : jq("[data-comment-dom-id=post-form]"),
				'j_comment_post_textarea' : jq("[data-comment-dom-id=post-textarea]"),
				'j_comment_reply_textarea' : jq("[data-comment-dom-id=reply-textarea]"),
				'j_comment_entry_content' : jq("[data-comment-dom-id=entry-content]"),
				'j_comment_showing_status' : jq("[data-comment-dom-id=showing-status]"),
				'j_comment_unshown_status' : jq("[data-comment-dom-id=unshown-status]"),
				'j_comment_loading_status' : jq("[data-comment-dom-id=comment-loading-status]"),
				'j_comment_entry_options' : jq("[data-comment-dom-id=entry-options]"),
				'j_view_more_container' : jq("[data-comment-dom-id=view-more]"),
				'j_view_more_button' : jq("[data-comment-dom-id=view-more] a"),
				'j_no_more_result' : jq("[data-comment-dom-id=no-more-result]"),
				'j_post_link' : jq('a[href="#post_link"]'),
				'j_reply_link' : jq('a[href="#replay_link"]'),
				'_topic_id' : <%=topicId %>,
				'_offset' : 5
			});
			
			</script>
		
		</c:otherwise>
	</c:choose>
</div>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<%@ include file="/WEB-INF/common/footer.jsp" %>

</body>
</html>